<!--
 * @Author yuec621@outLook.com
 * @Description: 填写分析组件
 * @Date: 2024-12-04 13:34:02
 * @LastEditTime: 2024-12-04 13:58:35
 * @LastEditors: Please set LastEditors
 * @Reference: 
-->
<template>
  <div>
    <el-drawer v-model="state.fillayaComShow" direction="rtl" size="40%" close-on-click-modal :modal="true">
      <template #header="{ close, titleId, titleClass }">
        <h4 class="mask_sub_title">
          <svg-icon class-name="search-icon" icon-class="biaotitubiao" /><span>填写分析</span>
        </h4>
      </template>
      <p class="drawer_sub_title" style="display: flex; justify-content: space-between">
        <span>填写</span>
        <span class="listInfoBtn" @click="listInfoBtnClick()">
          <svg-icon class-name="search-icon" icon-class="moban" />
          使用模板
        </span>
      </p>
      <div class="form_box">
        <el-form ref="formRef" :model="state.formData" :rules="state.rules" label-position="top">
          <el-row :gutter="23">
            <el-col :span="12">
              <el-form-item label="分析人" prop="analyst">
                <el-input disabled v-model="state.formData.analyst" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="category">
                <label slot="label" style="
                    display: flex;
                    justify-content: space-between;
                    width: 100%;
                  ">
                  <span><span style="color: #f56c6c">*</span>原因类型</span>
                  <el-button link type="primary" style="margin-left: 5px" @click="editClick">编辑
                  </el-button>
                </label>
                <el-select class="w100" clearable filterable v-model="state.formData.category" placeholder="请选择">
                  <el-option v-for="item in state.stationmodelList" :key="item.type" :label="item.type"
                    :value="item.type">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="报警原因" prop="reason">
                <el-input type="textarea" v-model="state.formData.reason" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="处理措施" prop="measure">
                <el-input type="textarea" v-model="state.formData.measure" placeholder="请输入">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="处理结果" prop="result">
                <el-input type="textarea" v-model="state.formData.result" placeholder="请输入"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="form_footer" style="display: flex; justify-content: space-between">
          <el-popover :visible="state.visible" placement="top" :width="200">
            <div style="display: flex;align-items: center;">
              <span style="margin-right: 10px;white-space: nowrap;">模板名称</span>
              <el-input size="mini" v-model="state.templateName" placeholder="请输入"></el-input>
            </div>
            <div style="text-align: right; margin-top: 10px;">
              <el-button size="small" text @click="state.visible = false">取消</el-button>
              <el-button size="small" type="primary" @click="SaveTemp">
                确认
              </el-button>
            </div>
            <template #reference>
              <el-button type="success" @click="savemobanClick" >保存为模板</el-button>
            </template>
          </el-popover>
          <span>
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="submitForm"> 确定 </el-button>
          </span>
        </div>
      </div>
      <alarmReason :openModal="state.openModal" @cancel="cancelFn" @sumbit="getrealPointTypeList"></alarmReason>
      <useTempCom :tempList="tempList" :tempShow="state.tempShow" :status="status" @close="close"
        @sumbitClick="sumbitClick" @delTemp="delTemp" @useFnTemplateClick="useFnTemplateClick"></useTempCom>
    </el-drawer>
  </div>
</template>
<script setup>
  import {
    computed,
    reactive,
    watchEffect
  } from "vue";
  import axios from "@/utils/request";
  import {
    ElMessage,
    ElMessageBox,
    ElNotification
  } from "element-plus";
  import {
    table_headers
  } from "@/components/commonCom/table_headers";
  import useTempCom from "./useTempCom.vue";
  import alarmReason from "./alarmReason.vue";
  import {
    getrealPointType
  } from "@/api/config";
  import useUserStore from "@/store/modules/user";
  const {
    proxy
  } = getCurrentInstance();
  const userStore = useUserStore();
  const props = defineProps({
    fillayaComShow: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
    tempList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    status: {
      type: String,
      default: "A",
    },
  });
  const emit = defineEmits(["sumbitClick"]);
  // 重点
  const state = reactive({
    visible:false,
    templateName:'',
    tempShow: false,
    fillayaComShow: props.fillayaComShow,
    formData: {
      analyst: userStore.name,
    },
    rules: {
      analyst: [{
        required: true,
        message: "请输入分析人",
        trigger: "blur",
      }, ],
      category: [{
        required: true,
        message: "请选择原因类型",
        trigger: "change",
      }, ],
      reason: [{
        required: true,
        message: "请输入报警原因",
        trigger: "blur",
      }, ],
      measure: [{
        required: true,
        message: "请输入处理措施",
        trigger: "blur",
      }, ],
      result: [{
        required: true,
        message: "请输入处理结果",
        trigger: "blur",
      }, ],
    },
    stationmodelList: [],
    openModal: false,
  });
  // 使用模板
  function useFnTemplateClick(item){
    state.formData=item
    state.formData.analyst=item.createBy
    state.tempShow = false
  }
  // 保存为模版
  function SaveTemp() {
    let data = {
      name: state.templateName,
      reason: state.formData.reason,
      measure: state.formData.measure,
      result: state.formData.result
    }
    
    axios.post('/template/analysis/save', data).then(res => {
      ElMessage.success(res.msg);
      state.fillayaComShow = false
      state.visible=false
    })
  }

  function submitForm() {
    proxy.$refs["formRef"].validate((valid) => {
      if (valid) {
        emit("submitFormfillayaCom", state.formData);
      }
    });
  }
  function savemobanClick(){
      proxy.$refs["formRef"].validate((valid) => {
      if (valid) {
           state.visible = true
      }
    });
  }

  function cancel() {
    props.fillayaComShow = false;
    state.fillayaComShow = false;
    state.formData = {
      analyst: userStore.name
    };
    emit("submitFormfillayaCom", false);
  }

  function listInfoBtnClick() {
    state.tempShow = true;
  }

  function getrealPointTypeList() {
    getrealPointType({}).then((res) => {
      state.stationmodelList = res.data.list;
    });
  }
  // 打开编辑报警原因类型弹窗
  const editClick = () => {
    state.openModal = true;
  };
  //
  const cancelFn = () => {
    state.openModal = false;
  };
  // 提交模板新增/修改
  const sumbitClick = (data) => {
    emit("sumbitClick", data);
  };
  // 删除模板
  const delTemp = (data) => {
    emit("delTemp", data);
  };
  // 关闭使用模板弹窗
  const close = () => {
    state.tempShow = false;
  };

  getrealPointTypeList();
  watchEffect(() => {
    state.fillayaComShow = props.fillayaComShow;
    if (props.fillayaComShow == false) {
      state.formData = {
        analyst: userStore.name,
      };
    }
  });
</script>
<style lang="scss" scoped>
  .ayasBox {
    padding: 16px;
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(180deg,
        rgba(235, 247, 255, 1) 0%,
        rgba(255, 255, 255, 0) 100%),
      rgba(255, 255, 255, 0.6);

    .ayasTitle {
      display: flex;
      justify-content: space-between;

      span {
        &:nth-child(1) {
          font-size: 16px;
          font-weight: 700;
          position: relative;
          padding-left: 10px;

          &::before {
            position: absolute;
            content: "";
            height: 16px;
            width: 4px;
            background-color: rgba(68, 136, 255, 1);
            top: 50%;
            transform: translateY(-50%);
            left: 0;
          }
        }
      }
    }
  }
</style>